import React, { Component } from 'react'
import QueryString from 'qs';
class Msg extends Component {
    constructor(props) {
        super(props);
    }
    state = {}
    fetchGet = () => {
        // fetch两个参数 第一个参数是url必须填  第二个 配置对象
        const url = 'http://localhost:3001/member_search';
        fetch(url, {
            method: 'get'
        }).then(res => {//fetch返回的整个response对象，使用json方法把它转换成json数据
            console.log(res);
            return res.json();
        }).then(data => {//转换成功后的数据
            console.log(data);
        }).catch(e => {//错误
            console.log(e);
        })
    }
    fetchPost = () => {
        let obj = {
            user_name: 'yang6666',
            password: '888822'
        }

        const url = 'http://localhost:3001/register';
        fetch(url, {
            method: 'post',
            headers: {
                /* 格式限制：json 文本 其他格式*/
                'Accept': 'application/json,text/plain',
                /* 请求类型 */
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: QueryString.stringify(obj)
        }).then(res => {//fetch返回的整个response对象，使用json方法把它转换成json数据
            console.log(res);
            return res.json();
        }).then(data => {//转换成功后的数据
            console.log(data);
        }).catch(e => {//错误
            console.log(e);
        })
    }
    render() {
        return (
            <div>
                <h1>msg</h1>
                <button onClick={this.fetchGet}>fetch get</button>
                <button onClick={this.fetchPost}>fetch post</button>
            </div>
        );
    }
}

export default Msg;
/* 
fetch
替代XMLHttpRequest对象


*/